<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Bootstrap 5 Testimonial Carousel Slider #2</title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="bootstrap5Slider.css"/>
	</head>
	<body>
		<div class="container-fluid bg-body-tertiary py-3">
		  <div id="testimonialCarousel" class="carousel">
		    <div class="carousel-inner">
		      <div class="carousel-item active">
		        <div class="card shadow-sm rounded-3">
		          <div class="quotes display-2 text-body-tertiary">
		            <i class="bi bi-quote"></i>
		          </div>
		          <div class="card-body">
		            <p class="card-text">"Some quick example text to build on the card title and make up the
		              bulk of
		              the card's content."</p>
		            <div class="d-flex align-items-center pt-2">
		              <img src="https://codingyaar.com/wp-content/uploads/square-headshot-1.png" alt="bootstrap testimonial carousel slider 2">
		              <div>
		                <h5 class="card-title fw-bold">Jane Doe</h5>
		                <span class="text-secondary">CEO, Example Company</span>
		              </div>
		            </div>
		          </div>
		        </div>
		      </div>
		      <div class="carousel-item">
		        <div class="card shadow-sm rounded-3">
		          <div class="quotes display-2 text-body-tertiary">
		            <i class="bi bi-quote"></i>
		          </div>
		          <div class="card-body">
		            <p class="card-text">"Some quick example text to build on the card title and make up the
		              bulk of
		              the card's content."</p>
		            <div class="d-flex align-items-center pt-2">
		              <img src="https://codingyaar.com/wp-content/uploads/square-headshot-2.png" alt="bootstrap testimonial carousel slider 2">
		              <div>
		                <h5 class="card-title fw-bold">June Doe</h5>
		                <span class="text-secondary">CEO, Example Company</span>
		              </div>
		            </div>
		          </div>
		        </div>
		      </div>
		      <div class="carousel-item">
		        <div class="card shadow-sm rounded-3">
		          <div class="quotes display-2 text-body-tertiary">
		            <i class="bi bi-quote"></i>
		          </div>
		          <div class="card-body">
		            <p class="card-text">"Some quick example text to build on the card title and make up the
		              bulk of
		              the card's content."</p>
		            <div class="d-flex align-items-center pt-2">
		              <img src="https://codingyaar.com/wp-content/uploads/bootstrap-profile-card-image.jpg" alt="bootstrap testimonial carousel slider 2">
		              <div>
		                <h5 class="card-title fw-bold">John Doe</h5>
		                <span class="text-secondary">CEO, Example Company</span>
		              </div>
		            </div>
		          </div>
		        </div>
		      </div>
		      <div class="carousel-item">
		        <div class="card shadow-sm rounded-3">
		          <div class="quotes display-2 text-body-tertiary">
		            <i class="bi bi-quote"></i>
		          </div>
		          <div class="card-body">
		            <p class="card-text">"Some quick example text to build on the card title and make up the
		              bulk of
		              the card's content."</p>
		            <div class="d-flex align-items-center pt-2">
		              <img src="https://codingyaar.com/wp-content/uploads/bootstrap-profile-card-image.jpg" alt="bootstrap testimonial carousel slider 2">
		              <div>
		                <h5 class="card-title fw-bold">John Doe</h5>
		                <span class="text-secondary">CEO, Example Company</span>
		              </div>
		            </div>
		          </div>
		        </div>
		      </div>
		      <div class="carousel-item">
		        <div class="card shadow-sm rounded-3">
		          <div class="quotes display-2 text-body-tertiary">
		            <i class="bi bi-quote"></i>
		          </div>
		          <div class="card-body">
		            <p class="card-text">"Some quick example text to build on the card title and make up the
		              bulk of
		              the card's content."</p>
		            <div class="d-flex align-items-center pt-2">
		              <img src="https://codingyaar.com/wp-content/uploads/bootstrap-profile-card-image.jpg" alt="bootstrap testimonial carousel slider 2">
		              <div>
		                <h5 class="card-title fw-bold">John Doe</h5>
		                <span class="text-secondary">CEO, Example Company</span>
		              </div>
		            </div>
		          </div>
		        </div>
		      </div>
		      <div class="carousel-item">
		        <div class="card shadow-sm rounded-3">
		          <div class="quotes display-2 text-body-tertiary">
		            <i class="bi bi-quote"></i>
		          </div>
		          <div class="card-body">
		            <p class="card-text">"Some quick example text to build on the card title and make up the
		              bulk of
		              the card's content."</p>
		            <div class="d-flex align-items-center pt-2">
		              <img src="https://codingyaar.com/wp-content/uploads/bootstrap-profile-card-image.jpg" alt="bootstrap testimonial carousel slider 2">
		              <div>
		                <h5 class="card-title fw-bold">John Doe</h5>
		                <span class="text-secondary">CEO, Example Company</span>
		              </div>
		            </div>
		          </div>
		        </div>
		      </div>
		      <div class="carousel-item">
		        <div class="card shadow-sm rounded-3">
		          <div class="quotes display-2 text-body-tertiary">
		            <i class="bi bi-quote"></i>
		          </div>
		          <div class="card-body">
		            <p class="card-text">"Some quick example text to build on the card title and make up the
		              bulk of
		              the card's content."</p>
		            <div class="d-flex align-items-center pt-2">
		              <img src="https://codingyaar.com/wp-content/uploads/bootstrap-profile-card-image.jpg" alt="bootstrap testimonial carousel slider 2">
		              <div>
		                <h5 class="card-title fw-bold">John Doe</h5>
		                <span class="text-secondary">CEO, Example Company</span>
		              </div>
		            </div>
		          </div>
		        </div>
		      </div>
		      <div class="carousel-item">
		        <div class="card shadow-sm rounded-3">
		          <div class="quotes display-2 text-body-tertiary">
		            <i class="bi bi-quote"></i>
		          </div>
		          <div class="card-body">
		            <p class="card-text">"Some quick example text to build on the card title and make up the
		              bulk of
		              the card's content."</p>
		            <div class="d-flex align-items-center pt-2">
		              <img src="https://codingyaar.com/wp-content/uploads/bootstrap-profile-card-image.jpg" alt="bootstrap testimonial carousel slider 2">
		              <div>
		                <h5 class="card-title fw-bold">John Doe</h5>
		                <span class="text-secondary">CEO, Example Company</span>
		              </div>
		            </div>
		          </div>
		        </div>
		      </div>
		      <div class="carousel-item">
		        <div class="card shadow-sm rounded-3">
		          <div class="quotes display-2 text-body-tertiary">
		            <i class="bi bi-quote"></i>
		          </div>
		          <div class="card-body">
		            <p class="card-text">"Some quick example text to build on the card title and make up the
		              bulk of
		              the card's content."</p>
		            <div class="d-flex align-items-center pt-2">
		              <img src="https://codingyaar.com/wp-content/uploads/bootstrap-profile-card-image.jpg" alt="bootstrap testimonial carousel slider 2">
		              <div>
		                <h5 class="card-title fw-bold">John Doe</h5>
		                <span class="text-secondary">CEO, Example Company</span>
		              </div>
		            </div>
		          </div>
		        </div>
		      </div>
		    </div>
		    <button class="carousel-control-prev" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="prev">
		      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
		      <span class="visually-hidden">Previous</span>
		    </button>
		    <button class="carousel-control-next" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="next">
		      <span class="carousel-control-next-icon" aria-hidden="true"></span>
		      <span class="visually-hidden">Next</span>
		    </button>
		  </div>
		</div>
		
		<p class="mt-5 text-center">Get a step-by-step written explanation here: <a href="https://codingyaar.com/bootstrap-5-testimonial-carousel-slider-2" target="_blank">Bootstrap 5 Testimonial Slider #2</a> </p>
		
		<p class="mt-2 text-center">Get a step-by-step video explanation here: <a href="https://youtu.be/KrIJD3oc0oM" target="_blank">Bootstrap 5 Testimonial Carousel Slider</a> </p>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
		<script src="bootstrap5Slider.js"></script>
	</body>
</html>